<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ page session="false" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page pageEncoding="UTF-8" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="<c:url value='/resources/css/style.css' />" media="all" />

<!-- Javascript Files -->
<script type="text/javascript" src="<c:url value='/resources/js/jquery-1.8.2.js' />"></script>	
<script type="text/javascript" src="<c:url value='/resources/js/jquery.fancybox-1.3.4.js'/>"></script> <!-- Big Image -->

<!--CSS FILES-->
<link rel="stylesheet" type="text/css" href="<c:url value='/resources/css/jquery.fancybox-1.3.4.css' />" media="screen" />
		
	<script type="text/javascript">
   
		//<![CDATA[
	
		jQuery(document).ready(function() {	
			$("a#fancybox").fancybox();
			
			$('#loader').hide();
			$('#show_heading').hide();
			
			function getCarPart(text, pageSelect){
				 $('#content_carpart').fadeOut();
					$('#loader').show();
					$.post("/ManopServiceWEB/carParts/ShowCarPart.html?text="+text+"&pageSelect="+pageSelect, function(response){					
						setTimeout("finishAjax('content_carpart', '"+escape(response)+"')", 400);
					});
					return false;
				}
			
			 function finishAjax(id, response){
				  $('#loader').hide();
				  $('#show_heading').show();
				  $('#'+id).html(unescape(response));
				  $('#'+id).fadeIn();
				}
		});

		(function(){
			  var bsa = document.createElement('script');
			     bsa.type = 'text/javascript';
			     bsa.async = true;
			     bsa.src = 'http://s3.buysellads.com/ac/bsa.js';
			  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
			})();	

		//]]>

	</script>

</head>
<body>
<div id="content_carpart">
<img src="<c:url value='/resources/css/images/loader.gif' />" style="margin-top: 8px; float: left" id="loader" alt="" />

		<c:forEach items="${carParts}" var="carPart">
			<div class="col_allw300">
			
                <div class="frameImage" >
					<a id="fancybox" href="<c:url value='/resources/images/${carPart.picPath}' />" title="<c:out value="${carPart.carModel.carBrand.nameEng}" /> <c:out value="${carPart.carModel.nameEng}" /> <c:out value="${carPart.name}" /> <c:out value="${carPart.detail}" /> <c:out value="${carPart.salePrice}" />">
						<img src="<c:url value='/resources/images/${carPart.picPath}' />" alt="fancybox" class="imgContent" />
					</a>
				</div>
                <div><p class="left descript"><c:out value="${carPart.carModel.carBrand.nameEng}" /> <c:out value="${carPart.carModel.nameEng}" /> <c:out value="${carPart.name}" /> <c:out value="${carPart.detail}" /> ราคา  <c:out value="${carPart.salePrice}" /></p></div>      
            <c:if test="${not empty username}">            
				<div id="button">	   		
			   		<ul id="crud-button">	   			
			   			<li><a href="#" title=""><img src="<c:url value='/resources/css/images/button-add.png' />" alt="เพิ่มรายการอะไหล่"/></a></li>
			   			<li><a href="#" title=""><img src="<c:url value='/resources/css/images/button-edit.png' />" alt="แก้ไขอะไหล่รายการนี้"/></a></li>
			   			<li><a href="#" title=""><img src="<c:url value='/resources/css/images/button-delete.png' />" alt="ลบอะไหล่รายการนี้"/></a></li>   			
			   		</ul>
			   	</div>							
			</c:if>
            </div>
		</c:forEach>
</div>	
<div class="paging">
	<c:forEach var="i" begin="1" end="${amountPages}" step="1" >			
		<a class="pageNumber" onclick="javascript:getCarPart('<c:out value="${modelName}" />',<c:out value="${i}" />)"><c:out value="${i}" /> </a>
	</c:forEach>
</div>
		
		
 
<c:if test="${empty carParts}">
 There are currently no carParts in the list. <a href="${addCarPart}">Add</a> a Part.
</c:if>

</body>
</html>